<template>
  <div class="box">
    <div class="list" v-if="list.length">
      <div class="item" v-for="(item, index) in list" :key="index">
         <p>
          <span>团队人数</span>
          <span>{{item.first_num || 0}}</span>
        </p>
        <p>
          <span>手机号</span>
          <span>{{item.real_name || 12}}</span>
        </p>
      </div>
    </div>
    <div class="noData" v-else>
      暂无数据～
    </div>
  </div>
</template>
<script>
import * as Api from '@/api/dealer/team'

export default {
  data() {
    return {
      list: [],
      page: 1,
      more: true
    }
  },
  
  onLoad() {
    this.getList()
  },
  onReachBottom() {
    if (!this.more) {
      this.$toast.warning('没有更多数据了')
      return
    }
    this.page++
    this.getList()
  },
  methods: {
    getList() {
      const app = this
      app.isLoading = true
      Api.team({
          page: app.page
        })
        .then(result => {
          console.log(result.data.data)
          // api数据赋值
          let list = result.data.data.data
          app.list = app.page === 1 ? list : [...app.list, ...list]
          app.more = result.data.data.current_page < result.data.data.last_page

        })
        .finally(() => app.isLoading = false)
    }
  }
}
</script>
<style lang="scss" scoped>
  .list {
    box-sizing: border-box;
    padding: 30rpx;
    .item {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background: #fff;
      border-radius: 10rpx;
      p {
        display: flex;
        align-items: center;
        &:last-child {
          margin-top: 10rpx;
        }
        span {
          flex: 1;
        }
      }
    }
  }
  .noData {
    text-align: center;
    padding: 100rpx 30rpx;
    color: #999;
  }
</style>